import React, {Component} from 'react';
import Markdown from 'react-markdown';
import {Anchor, Row, Col} from 'antd';

const {Link} = Anchor;

class JsPage extends Component {
    constructor(props) {
        super(props);
    }


    render() {

        return (
            <div>
                <Row>
                    <Col span={19}>
                        <h3 id="MiddleAttack"> 中间人攻击 </h3>
                        <p>让我们观察下面这个例子:</p>
                        <div align="center"><img src='https://gitee.com/nick070809/pics/raw/master/skill/03.jpg' align='center' alt='Markdown' /></div>
                        <Markdown source={"Alice 连接到了 Web 服务器上，Bob打算了解 Alice 正在发送什么信息。于是 Bob 建立 MITM 攻击，通过告诉服务器他是 Alice，并且告诉 Alice 他是服务器。现在，所有 Alice 的请求都会发给 Bob，Bob 会将它们转发给服务器，并对服务器的响应做相同操作。这样，Bob 就能够拦截、读取或修改所有 Alice 和服务器之间的流量。\n" +
                        "\n" +
                        "地址解析协议（ARP）欺骗可能是最常见的 MITM 攻击。它基于一个事实，就是 ARP 并不验证系统所收到的响应。这就意味着，当 Alice 的电脑询问网络上的所有设备，“IP 为 xxx.xxx.xxx.xxx 的机器的 MAC 地址是什么”时，它会信任从任何设备得到的答复。该设备可能是预期的服务器，也可能是不是。ARP 欺骗或毒化的工作方式是，发送大量 ARP 响应给通信的两端，告诉每一端攻击者的 MAC 地址对应它们另一端的 IP 地址。"}/>
                        <h3 id="http_w"> https工作原理 </h3>
                        <Markdown source={"1、客户端发起HTTPS请求\n" +
                        "\n" +
                        "用户在浏览器里输入一个https网址，然后连接到server的443端口。\n" +
                        "\n" +
                        "2、服务端的配置\n" +
                        "\n" +
                        "采用HTTPS协议的服务器必须要有一套数字证书，可以自己制作，也可以向组织申请。区别就是自己颁发的证书需要客户端验证通过，才可以继续访问，而使用受信任的公司申请的证书则不会弹出提示页面。\n" +
                        "\n" +
                        "web通信中的SSL加密的公钥证书(受信任的第三方证书颁发机构签名颁发)常见的如\n" +
                        "\n" +
                        "    VeriSign\n" +
                        "    Thawte\n" +
                        "    GlobalSign\n" +
                        "    Symantec\n" +
                        "\n" +
                        "3、传送证书\n" +
                        "\n" +
                        "这个证书其实就是公钥，只是包含了很多信息，如证书的颁发机构，过期时间等等。\n" +
                        "\n" +
                        "4、客户端解析证书\n" +
                        "\n" +
                        "这部分工作是有客户端的TLS来完成的，首先会验证公钥是否有效，比如颁发机构，过期时间等等，如果发现异常，则会弹出一个警告框，提示证书存在问题。如果证书没有问题，那么就生成一个随即值。然后用证书对该随机值进行加密。\n" +
                        "\n" +
                        "5、传送加密信息\n" +
                        "\n" +
                        "这部分传送的是用证书加密后的随机值，目的就是让服务端得到这个随机值，以后客户端和服务端的通信就可以通过这个随机值来进行加密解密了。\n" +
                        "\n" +
                        "6、服务段解密信息\n" +
                        "\n" +
                        "服务端用私钥解密后，得到了客户端传过来的随机值(私钥)，然后把内容通过该值进行对称加密。所谓对称加密就是，将信息和私钥通过某种算法混合在一起，这样除非知道私钥，不然无法获取内容，而正好客户端和服务端都知道这个私钥，所以只要加密算法够彪悍，私钥够复杂，数据就够安全。\n" +
                        "\n" +
                        "7、传输加密后的信息\n" +
                        "\n" +
                        "这部分信息是服务段用私钥加密后的信息，可以在客户端被还原\n" +
                        "\n" +
                        "8、客户端解密信息\n" +
                        "\n" +
                        "客户端用之前生成的私钥(随即值)解密服务段传过来的信息，于是获取了解密后的内容。整个过程第三方即使监听到了数据，也束手无策。"}/>
                        <h3 id="Consumer"> Consumer </h3>
                        <Markdown source={"不能写冒点。"}/>

                    </Col>
                    <Col span={5}>
                        <Anchor showInkInFixed="true" style={{background:"#ebefe0"}}>
                            <Link href="#MiddleAttack" title="中间人攻击"/>
                            <Link href="#http_w" title="https工作原理"/>
                            <Link href="#Consumer" title="Consumer"/>

                        </Anchor>
                    </Col>
                </Row>
            </div>

        );
    }
}

export default JsPage;